<template>
  <div>
 <div>{{ sum }}</div>
 <button @click="add">sum+1</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { ref,onBeforeMount,onMounted, onBeforeUnmount, onUnmounted,onBeforeUpdate,onUpdated } from 'vue';
let sum=ref(0)
function add(){
  sum.value+=1
}
// 创建
console.log("创建");
// 挂载前
onBeforeMount(()=>{
  console.log("挂载前");
})
// 挂载完毕
onMounted(() => {
  console.log("子组件挂载完毕"); 
})
// 更新前
onBeforeUpdate(()=>{
  console.log("更新前");
})
// 更新完毕
onUpdated(() => {
  console.log("更新完毕"); 
})
// 卸载前
onBeforeUnmount(()=>{
  console.log("卸载前");
})
// 卸载完毕
onUnmounted(() => {
  console.log("卸载完毕"); 
})
</script>
<style>

</style>